<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Muse","version":"7.7.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="黑马补充自定义指令12345678910111213141516171819202122232425262728293031323334&lt;div id&#x3D;&quot;app&quot;&gt;    &lt;input type&#x3D;&quot;text&quot; v-focus&gt;    &lt;div class&#x3D;&quot;div&quot; v-colo">
<meta property="og:type" content="article">
<meta property="og:title" content="vue基本语法">
<meta property="og:url" content="http://yoursite.com/2020/03/12/vue%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/index.html">
<meta property="og:site_name" content="李良荣的个人博客">
<meta property="og:description" content="黑马补充自定义指令12345678910111213141516171819202122232425262728293031323334&lt;div id&#x3D;&quot;app&quot;&gt;    &lt;input type&#x3D;&quot;text&quot; v-focus&gt;    &lt;div class&#x3D;&quot;div&quot; v-colo">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-03-12T07:29:36.568Z">
<meta property="article:modified_time" content="2020-03-11T06:41:01.715Z">
<meta property="article:author" content="李良荣">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yoursite.com/2020/03/12/vue%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true
  };
</script>

  <title>vue基本语法 | 李良荣的个人博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">李良荣的个人博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>Home</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>Archives</a>

  </li>
  </ul>

</nav>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="en">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/03/12/vue%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="李良荣">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="李良荣的个人博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          vue基本语法
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2020-03-12 15:29:36" itemprop="dateCreated datePublished" datetime="2020-03-12T15:29:36+08:00">2020-03-12</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">Edited on</span>
                <time title="Modified: 2020-03-11 14:41:01" itemprop="dateModified" datetime="2020-03-11T14:41:01+08:00">2020-03-11</time>
              </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="黑马补充"><a href="#黑马补充" class="headerlink" title="黑马补充"></a>黑马补充</h1><h3 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;text&quot; v-focus&gt;</span><br><span class="line">    &lt;div class&#x3D;&quot;div&quot; v-color&#x3D;&quot;color&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line">&lt;script src&#x3D;&quot;vue.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">    &#x2F;&#x2F;全局指令：不带参数</span><br><span class="line">    Vue.directive(&#39;focus&#39;, &#123;</span><br><span class="line">        inserted: function (el) &#123;</span><br><span class="line">            el.focus()</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    &#x2F;&#x2F;全局指令：带参数</span><br><span class="line">    Vue.directive(&#39;color&#39;, &#123;</span><br><span class="line">        inserted: function (el, binding) &#123;</span><br><span class="line">            el.style.backgroundColor &#x3D; binding.value</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    var app &#x3D; new Vue(&#123;</span><br><span class="line">        el: &quot;#app&quot;,</span><br><span class="line">        data: &#123;</span><br><span class="line">            color: &#39;black&#39;</span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;&#125;,</span><br><span class="line">        &#x2F;&#x2F;局部指令：带参数</span><br><span class="line">        directives: &#123;</span><br><span class="line">            color: &#123;</span><br><span class="line">                inserted: function (el, binding) &#123;</span><br><span class="line">                    el.style.backgroundColor &#x3D; binding.value</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;，</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h1 id="冷知识"><a href="#冷知识" class="headerlink" title="冷知识"></a>冷知识</h1><p>表达式：一个表达式会产生一个值</p>
<p>语句：语句往往表示行为，赋值语句，表达式语句，if语句，循环语句</p>
<ol>
<li>钩子函数的this指向<strong>调用他的</strong>vue实例,需要特殊注意一下箭头函数</li>
<li>v-for比v-if优先级更高，必须避免使用在一起</li>
<li>使用$_表私有属性</li>
<li>mvvm思想：双向绑定，响应式开发model view viewModel</li>
<li>组件事件的监听必须使用.native修饰符</li>
</ol>
<h3 id="生命周期函数"><a href="#生命周期函数" class="headerlink" title="生命周期函数"></a>生命周期函数</h3><p><strong>beforeCreate</strong>：el 和 data 并未初始化 （此方法不常用） </p>
<p><strong>created</strong>：完成了 data 数据的初始化，el的初始化未完成。用来发送ajax</p>
<p><strong>beforeMount</strong>：（执行此方法时已经完成了 el 和 data 初始化 （已经赋予了对应的值）） </p>
<p>渲染DOM之前先确认下是否有要编译的根元素（有无el属性），有才继续确认是否具有模板属性<code>template</code>,如果有模版属性，则会用<code>template</code>的值替</p>
<p>换掉HTML中的结构，<code>template</code>模版中只能有一个根元素（而且不能是文本）； </p>
<p><strong>mounted</strong>：（执行此方法时代表已经挂载结束了） </p>
<p>把编译好的数据挂载到DOM元素上，最后渲染成真实的DOM元素；真实DOM已经渲染完成，可以操作DOM了</p>
<p><strong>beforeUpdate</strong>：当页面依赖的数据更改之后触发（此时DOM结构还没有重新加载） </p>
<p><strong>updated</strong>：DOM结构重新加载之后触发</p>
<p>调用vm.$destroy()之后触发下面两个事件： </p>
<p><strong>beforeDestroy</strong>：实例销毁之前调用。在这一步，实例仍然完全可用。（可在此处清除定时器，清除事件绑定） </p>
<p><strong>destroyed</strong>：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</p>
<p>destroyed钩子函数有一点一定要特别注意：在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听</p>
<p>以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；</p>
<p>否则，DOM节点还是存在，影响浏览器性能。</p>
<h3 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h3><p>所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着<strong>你不能使用箭头函数来定义一个</strong></p>
<p><strong>生命周期方法</strong>(例如created: () =&gt; this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同，</p>
<p>this.fetchTodos的行为未定义。</p>
<h1 id="基本操作"><a href="#基本操作" class="headerlink" title="基本操作"></a>基本操作</h1><h3 id="插值操作"><a href="#插值操作" class="headerlink" title="插值操作"></a>插值操作</h3><p>mustache语法；</p>
<p>v-once:语法后边不需要跟任何表达式，元素和组件只渲染一次</p>
<p>v-html:解析字符串并渲染</p>
<p>v-text:渲染文本</p>
<p>v-pre:不解析标签</p>
<h3 id="绑定属性"><a href="#绑定属性" class="headerlink" title="绑定属性"></a>绑定属性</h3><p>v-bind:动态绑定属性（都是以key,value的形式实现绑定，表达式需要提交原始值形式的数据）</p>
<p>v-bind:动态绑定class    -&gt;对象语法{active:isActive}  isActive—&gt;true|false</p>
<p>v-bind:动态绑定style    -&gt;对象语法{fontSize:’50px’,color:currentColor,}</p>
<p>2.6开始，指令的参数可以使用[]的形式包裹，v-bind:[attributeName]</p>
<h3 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h3><p>computed：基于依赖（数据）进行缓存，只会执行一次</p>
<p>应用场景：求总和、固定值、初始化，方法不用频繁调用时使用。</p>
<p>get();计算属性本质上是调用了computed的该方法</p>
<p>set();一般省略</p>
<h3 id="侦听器"><a href="#侦听器" class="headerlink" title="侦听器"></a>侦听器</h3><p>watch：侦听属性（<strong>数据</strong>）的变化</p>
<p>应用场景：数据变化时执行<strong>异步</strong>或开销较大的操作</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">watch:&#123;</span><br><span class="line">    firstName:<span class="function"><span class="keyword">function</span>(<span class="params">newVal,oldVal</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.fullName = val + <span class="keyword">this</span>.lastName</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="过滤器"><a href="#过滤器" class="headerlink" title="过滤器"></a>过滤器</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html中使用</span></span><br><span class="line">&lt;span&gt;&#123;&#123;username|toUpper&#125;&#125;&lt;<span class="regexp">/span&gt;</span></span><br><span class="line"><span class="regexp">&lt;span&gt;&#123;&#123;date|dateFormate&#125;&#125;&lt;/</span>span&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//全局过滤</span></span><br><span class="line">Vue.filter(<span class="string">'dateFormate'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value.getFullYear() + <span class="string">'-'</span> + value.getMonth() + <span class="string">'-'</span> + value.getDay()</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//局部过滤</span></span><br><span class="line">filters: &#123;</span><br><span class="line">    toUpper(value) &#123;</span><br><span class="line">        <span class="keyword">return</span> value ? value.toUpperCase()[<span class="number">0</span>] + value.substring(<span class="number">1</span>, value.length) : <span class="string">''</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="事件监听"><a href="#事件监听" class="headerlink" title="事件监听"></a>事件监听</h3><p>v-on:事件监听</p>
<p>参数： </p>
<p>​    1、需要传参，但是没传。vue会默认传递event</p>
<p>​    2、可以通过$event获取event对象</p>
<p>修饰符：</p>
<p>.stop    ——&gt;event.stopPropagation()    格式@click.stop = “btnclick”</p>
<p>.prevent—–&gt;event.preventDefault()</p>
<p>.enter   ——&gt;enter键抬起时触发事件</p>
<p>.native  ——&gt;监听组件的点击事件</p>
<h3 id="条件判断"><a href="#条件判断" class="headerlink" title="条件判断"></a>条件判断</h3><p>在dom中渲染或销毁组件</p>
<p>v-if/v-else/v-else-if:根据条件值的真假，来判断元素是否被渲染</p>
<p>补充点：key的使用，判断input内的值是否复用</p>
<p>v-show:display:none,效率更高，不支持<template>元素</p>
<p>使用场景，只切换一次使用v-if</p>
<h3 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h3><p>格式：v-for=(item/value,index/key)in items</p>
<p>如果是迭代对象的话还可以添加第三个参数，用来获取下标值</p>
<p><strong>key的作用</strong></p>
<p>vue底层会保留一切复用性高的元素，再updata的时候知识为改变的数据进行打补丁，而key可以保证了素的唯一性，再发生变化时会发生更新。</p>
<p>除此之外，key在和v-for一起使用时还能保证vue对节点的跟踪、关联</p>
<h3 id="数组-对象"><a href="#数组-对象" class="headerlink" title="数组|对象"></a>数组|对象</h3><p>响应式数组方法：push、pop、shift、unshift、splice、sort、reverse</p>
<p>注:通过索引值修改数组时，会修改数据，但不能做到响应式</p>
<p>可以使用Vue.set(arr,key,value)或者splice方法来监听数组(vm.$set)</p>
<p>对象也需要借助Vue.set(object,key,value)来监听对象</p>
<h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3><ol>
<li>默认触发input事件，添加lazy修饰符会变成change事件</li>
<li>多选框和单选框都需要加上value属性并赋予不同的值，然后将选中的值通过v-model绑定给数据</li>
<li>原理：v-bind:value+@input</li>
</ol>
<p>修饰符：lazy（移出或失去焦点再响应），number（将默认的“1”转为1），trim(去空格)</p>

    </div>

    
    
    

      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/03/11/%E5%85%B3%E4%BA%8EJavaScript/" rel="prev" title="javaScript">
      <i class="fa fa-chevron-left"></i> javaScript
    </a></div>
      <div class="post-nav-item"></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#黑马补充"><span class="nav-number">1.</span> <span class="nav-text">黑马补充</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义指令"><span class="nav-number">1.0.1.</span> <span class="nav-text">自定义指令</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#冷知识"><span class="nav-number">2.</span> <span class="nav-text">冷知识</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#生命周期函数"><span class="nav-number">2.0.1.</span> <span class="nav-text">生命周期函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#注意事项"><span class="nav-number">2.0.2.</span> <span class="nav-text">注意事项</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#基本操作"><span class="nav-number">3.</span> <span class="nav-text">基本操作</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#插值操作"><span class="nav-number">3.0.1.</span> <span class="nav-text">插值操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#绑定属性"><span class="nav-number">3.0.2.</span> <span class="nav-text">绑定属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#计算属性"><span class="nav-number">3.0.3.</span> <span class="nav-text">计算属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#侦听器"><span class="nav-number">3.0.4.</span> <span class="nav-text">侦听器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#过滤器"><span class="nav-number">3.0.5.</span> <span class="nav-text">过滤器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件监听"><span class="nav-number">3.0.6.</span> <span class="nav-text">事件监听</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#条件判断"><span class="nav-number">3.0.7.</span> <span class="nav-text">条件判断</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#v-for"><span class="nav-number">3.0.8.</span> <span class="nav-text">v-for</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组-对象"><span class="nav-number">3.0.9.</span> <span class="nav-text">数组|对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表单"><span class="nav-number">3.0.10.</span> <span class="nav-text">表单</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">李良荣</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">2</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">李良荣</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> v4.2.0
  </div>
  <span class="post-meta-divider">|</span>
  <div class="theme-info">Theme – <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> v7.7.2
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

</body>
</html>
